<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '登录',
  },
}
</route>
<template>
  <view class="overflow-hidden px-4 bg" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view class="top">
      <img class="img-left" src="@/static/app/custom-icon/小.png" />
      <img class="img-right" src="@/static/images/大.png" alt="" />
    </view>

    <view class="content">
      <view class="tips ml pt-4">您好，欢迎登录！</view>

      <view>
        <form action="/">
          <view class="flex flex-row flex-items-center" style="margin-top: 2.56rem">
            <label for="username" class="form-text">账号</label>
            <input
              class="form-input"
              name="username"
              type="text"
              placeholder="请输入您的账号"
              :modelValue="model.username"
              @update:modelValue="model.username = $event"
            />
          </view>
          <view class="form-item flex flex-row flex-items-center" style="margin-top: 1.13rem">
            <label for="password" class="form-text">密码</label>
            <input
              class="form-input"
              name="password"
              :password="showPassword"
              placeholder="请输入您的密码"
              v-model="model.password"
            />
            <view class="uni-icon" @click="changePassword">
              <wd-transition :show="showPassword" name="fade">
                <img v-if="showPassword" src="@/static/app/custom-icon/眼睛-状态.png" alt="" />
              </wd-transition>
              <wd-transition :show="!showPassword" name="fade">
                <img
                  v-if="!showPassword"
                  src="@/static/app/custom-icon/semiDesign-eye.png"
                  alt=""
                />
              </wd-transition>
            </view>
          </view>
        </form>
      </view>
      <view class="flex justify-between mt-3" style="padding: 0 1rem">
        <view>
          <text class="text-white form-bottom-tips">还没账户？</text>
          <text class="form-bottom-tips" style="color: #0056fb" @click="goRegister">去注册</text>
        </view>
        <text class="form-bottom-tips">忘记密码</text>
      </view>

      <view class="btn ma mt-8 flex flex-col justify-center">
        <text class="btn-text" @click="login">登录</text>
      </view>

      <wd-divider color="#0056FB" class="divider">
        <text class="login-other-tips">第三方登录</text>
      </wd-divider>
      <view class="flex justify-center mt">
        <img src="@/static/app/custom-icon/fa5-weixin-fab%201@1x.png" alt="" />
        <img class="ml-12 mr12" src="@/static/app/custom-icon/antOutline-qq 1@1x.png" alt="" />
        <img src="@/static/app/custom-icon/antOutline-weibo 1@1x.png" alt="" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'Login',
})
const showPassword = ref(true)
function changePassword() {
  showPassword.value = !showPassword.value
}
const model = ref({
  username: '',
  password: '',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

onLoad(() => {
  // uni.hideTabBar()
})

const goRegister = () => {
  uni.navigateTo({
    url: '/pages/register/index',
  })
}

function login() {
  if (model.value.username === '') {
    uni.showToast({
      title: '请输入账号',
      icon: 'none',
    })
    return
  }

  if (model.value.password === '') {
    uni.showToast({
      title: '请输入密码',
      icon: 'none',
    })
    return
  }

  uni.navigateTo({
    url: '/pages/home/home',
  })
}
</script>

<style>
.bg {
  height: 1624rpx;
  background: rgb(76, 139, 254) 100%;
}

.content {
  position: absolute;
  top: 16.31rem;
  left: 0;
  width: 100%;
  height: 34.44rem;
  background-color: rgba(177, 224, 247, 0.67);
}

.img-left {
  position: absolute;
  top: 6.56rem;
  left: -0.56rem;
  width: 5.56rem;
}

.img-right {
  position: absolute;
  top: 3.25rem;
  right: -0.88rem;
  width: 18rem;
}

.tips {
  font-family: YSBiaoTiHei-regular;
  font-size: 1.75rem;
  line-height: 2.44rem;
  color: rgba(88, 143, 255, 1);
}

.form-text {
  width: 2.5rem;
  height: 1.75rem;
  margin-left: 2.25rem;
  font-family: SourceHanSansSC-bold;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: rgba(79, 139, 255, 1);
  text-align: left;
}

.form-input {
  width: 15rem;
  height: 2.5rem;
  padding-left: 0.63rem;
  margin-left: 0.88rem;
  line-height: 1.25rem;
  background-color: rgba(76, 139, 254, 0.3);
  border-radius: 3.13rem;
}

.form-bottom-tips {
  font-family: SourceHanSansSC-regular;
  font-size: 0.88rem;
}

.btn {
  width: 19.69rem;
  height: 3.44rem;
  font-family: PingFangSC-regular;
  font-size: 0.88rem;
  line-height: 1.25rem;
  color: rgba(16, 16, 16, 1);
  text-align: center;
  background: linear-gradient(
    265.93deg,
    rgba(90, 146, 254, 1) 22.86%,
    rgba(112, 207, 234, 1) 50.99%
  );
  border-radius: 1.75rem;
}

.btn-text {
  height: 2rem;
  font-family: SourceHanSansSC-regular;
  font-size: 1.38rem;
  line-height: 2rem;
  color: rgba(255, 255, 255, 1);
}

.divider {
  margin-top: 6.56rem;
}

.login-other-tips {
  font-family: SourceHanSansSC-regular;
  font-size: 0.88rem;
  line-height: 1.25rem;
  color: white;
}

.form-item {
  position: relative;
}
.uni-icon {
  position: absolute;
  top: 0.5rem;
  right: 3rem;
}
</style>
